<template>
  <view class="u-wrap">
    <view class="u-search-box">
      <view class="u-search-inner">
        <u-icon name="search" color="#909399" :size="28"></u-icon>
        <text class="u-search-text">搜索灯具</text>
      </view>
    </view>
    <view class="u-menu-wrap">
      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
        <view v-for="(item,index) in category.list" :key="index" class="u-tab-item" :class="{'u-tab-item-active':cunnect===item.id}" @click="setid(item.id,item.name)">
          <text class="u-line-1 ">{{item.name}}</text>
        </view>
      </scroll-view>
        <scroll-view scroll-y class="right-box" >
          <view class="page-view">
            <view class="class-item" >
              <view class="item-title">
                <text>{{cunname}}</text>
              </view>
              <view class="item-container" v-for="(item,index) in catelist.list" :key="index" @click="tiaozhuan(item.id)">
                <view class="thumb-box">
                  <view class="hleft">
                    <image :src="item.image_url" mode=""></image>
                  </view>

                  <view class="hright">
                    <view class="htitle">
                    {{item.name}}
                    </view>
                    <view class="prices">
                      <view class="price">
                        ￥{{item.unit_price}}
                      </view>
                   
                    </view>
                    <view class="cart">
                      <view class="iconfonta icon-gouwuche1:before">
                      </view>
                    </view>

                  </view>
                </view>
              </view>
            </view>

          </view>
        </scroll-view>
    </view>
  </view>
  <Lampfooter></Lampfooter>
</template>

<script setup>
  import Lampfooter from "/src/components/Lampfooter/Lampfooter.vue"
  import {
    ref
  } from 'vue';
  import {
    searchStore
  } from "../../store/search.js"
  const searchstore = searchStore()
  const {
    category,
    catelist
  } = searchstore
  //发送请求获取灯具分类
  searchstore.getcategory()
  //选中分类id
  const cunnect = ref(1)
  //选中分类名字
 const cunname = ref("书房")
 searchstore.getcatelist(cunnect.value)
//更改id
function setid(id,name){
  cunnect.value = id,
  cunname.value= name,
   searchstore.getcatelist(id)
}
  //跳转页面
  function tiaozhuan(goodid){
    uni.navigateTo({
      url: `/subPack/goods_detail/goods_detail?goods_id=${goodid}`
    })
  }
</script>

<style lang="scss" scoped>
  .u-wrap {
    height: calc(100vh);
    /* #ifdef H5 */
    height: calc(100vh - var(--window-top));
    /* #endif */
    display: flex;
    flex-direction: column;
  }

  .u-search-box {
    padding: 18rpx 30rpx;
  }

  .u-menu-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .u-search-inner {
    background-color: rgb(234, 234, 234);
    border-radius: 100rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 16rpx;
  }

  .u-search-text {
    font-size: 26rpx;
    color: $u-tips-color;
    margin-left: 10rpx;
  }

  .u-tab-view {
    width: 200rpx;
    height: 100%;
  }

  .u-tab-item {
    height: 110rpx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #444;
    font-weight: 400;
    line-height: 1;
  }

  .u-tab-item-active {
    position: relative;
    color: #000;
    font-size: 30rpx;
    font-weight: 600;
    background: #fff;
  }

  .u-tab-item-active::before {
    content: "";
    position: absolute;
    border-left: 4px solid #ffaa00;
    height: 32rpx;
    left: 0;
    top: 39rpx;
  }

  .u-tab-view {
    height: 100%;
  }

  .right-box {
    background-color: rgb(250, 250, 250);
  }

  .page-view {
    padding: 16rpx;
  }

  .class-item {
    margin-bottom: 30rpx;
    background-color: #fff;
    padding: 16rpx;
    border-radius: 8rpx;
  }

  .item-title {
    font-size: 26rpx;
    color: $u-main-color;
    font-weight: bold;
  }

  .item-menu-name {
    font-weight: normal;
    font-size: 24rpx;
    color: $u-main-color;
  }

  .item-container {
    margin-left: 40rpx;
    margin-right: 10rpx;

    .thumb-box {



      margin-top: 20rpx;
      display: flex;
      border-radius: 10rpx;
      box-shadow: 2rpx 2rpx 10rpx 2rpx #dadada;

      .hleft {
        height: 180rpx;
        margin: 15rpx;

        image {
          border-radius: 10rpx;
          width: 180rpx;
          height: 180rpx;
        }
      }

      .hright {
        position: relative;
        padding-right: 10rpx;
        padding-left: 10rpx;
        width: 300rpx;

        .htitle {
          margin-top: 30rpx;
          font-size: 30rpx;
          color: #353535;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .prices {
          position: absolute;
          bottom: 20rpx;

          .price {
            display: inline-block;
            font-size: 35rpx;
            color: #f23030;
          }

          .delprice {
            display: inline-block;
            margin-left: 10rpx;
            left: 110rpx;
            font-size: 30rpx;
            text-decoration: line-through;
            color: #999999;
          }
        }

        .cart {
          position: absolute;
          right: 20rpx;
          bottom: 20rpx;
          margin-top: 25rpx;
        }

      }
    }
  }
</style>